@import '../../../less/commons.less';

@navBackColor: #242424;
@navTextColor: #b8b8b8;
@navActiveTextColor: #ddd;
@navActiveBackColor: #555;
@navActiveBorderColor: transparent;
@navScrollBackColor: #333;


tui\:navigator {
	display: block;
	position: relative;
	font-size: 14px;
	background-color: @navBackColor;
	color: @navTextColor;
	overflow: hidden;
	width: 300px;
	height: 500px;
	div.tui-up, div.tui-down {
		position: absolute;
		left:0;
		right:0;
		height: 20px;
		line-height: 20px;
		text-align: center;
		//opacity: 0.7;
	}
	div.tui-up {
		top: 0;
		.liner-color-rgba(@navScrollBackColor - #111, transparent ); //@navBackColor
		.icon-base;
		//&:before {
		//	.fa-angle-up;
		//}
	}
	div.tui-down {
		bottom: 0;
		.liner-color-rgba(transparent, @navScrollBackColor - #111);
		.icon-base;
		//&:before {
		//	.fa-angle-down;
		//}
	}

	div.tui-container {
		overflow-x: hidden;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0; 
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 100%;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	div.tui-line {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		padding-left:15px;
		cursor: pointer;
		background-color: @navBackColor;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
		white-space: nowrap;
		word-break: keep-all;
		overflow: hidden;
		text-overflow: ellipsis;
		outline: none;
		&.tui-child {
			background-color: @navBackColor + #050505;
		}
		i {
			.icon();
			margin-right: 15px;
			text-align: center;
		}
		&.tui-expand,&.tui-collapse {
			position: relative;
			&:after {
				.icon();
				.fa-angle-left();
				position: absolute;
				top:0;
				bottom:0;
				right:0;
				width: 20px;
			}
		}
		&.tui-expand {
			&:after {
				.fa-angle-down();
			}
			border-bottom: 1px solid @navBackColor + #151515;
		}
		&:hover,&:focus {
			background-color: @navBackColor - #050505;
		}
		&.tui-active {
			color: @navActiveTextColor;
			background-color: @navActiveBackColor;
			//border-left:6px solid @navActiveBorderColor;
			border-right:6px solid @navActiveBorderColor;
		}
		
	}
}